﻿<!DOCTYPE HTML>
<html>

<head>
  <title>Iran Game Center </title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <!-- stylesheets -->
  <link href="css/style.css" rel="stylesheet" type="text/css" />
  <link href="css/light.css" rel="stylesheet" type="text/css" />
  <link href="css/chatstyle.css" rel="stylesheet" type="text/css" />
  
  <!-- modernizr enables HTML5 elements and feature detects -->
  <script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>

 <body onload="javascript: paintBoard();setInterval('chat.update()', 1000);">  <div id="main">
  <div id="main">

    <!-- begin header -->
    <header>
      
      <nav>
        <ul class="sf-menu" id="nav">
          <li><a href="index.php">خانه</a></li>          
        </ul>
      </nav>
	  <div id="logo"><h1>مرکز بازی های  <a href="#">آنلاین</a>ایران</h1></div>
    </header>
    <!-- end header -->

    <!-- begin content -->
    <div id="site_content">
	<center>
	        <h2>تصویر بازی انجام شده</h2>

        <canvas width="430" height ="490" id="board" onclick="javascript: clickHandler(event);"></canvas>
     </center>
    </div>
    <!-- end content -->
  </div>
  <!-- javascript at the bottom for fast page loading -->
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.easing-sooper.js"></script>
  <script type="text/javascript" src="js/jquery.sooperfish.js"></script>
  <!-- initialise sooperfish menu -->
  <script type="text/javascript">
    $(document).ready(function() {
      $('ul.sf-menu').sooperfish();
    });
  </script>
  <script>
  
var xBoard = 0;
var oBoard = 0;
var begin = true;
var context;
var width, height;
var playerXO = 'X';

function paintBoard() {
   var board = document.getElementById('board');
  
   width = board.width;
   height = board.height;
   context = board.getContext('2d');

   context.beginPath();
   context.strokeStyle = '#000'; 
   context.lineWidth   = 4;

   context.moveTo((width / 3), 0);
   context.lineTo((width / 3), height);

   context.moveTo((width / 3) * 2, 0);
   context.lineTo((width / 3) * 2, height);

   context.moveTo(0, (height / 3));
   context.lineTo(width, (height / 3));

   context.moveTo(0, (height / 3) * 2);
   context.lineTo(width, (height / 3) * 2);

   context.stroke();
   context.closePath();
  
   if (begin) {
   var url = location.href;
var param = url.split("=");
var test = param[1];
if (test !="null"){
for (var i=0;i<test.length;i= i+4)
{ 
	
	if(test[i]){
	markBit(1 <<test[i]-1, 'X');}
	if (test[i+2]){
	markBit(1 <<test[i+2]-1, 'O')}

}  }
      begin = false;
   } else {
      begin = true;
   }   
}

function paintX(x, y) {

   context.beginPath();

   context.strokeStyle = '#ff0000'; 
   context.lineWidth   = 4;

   var offsetX = (width / 3) * 0.1;
   var offsetY = (height / 3) * 0.1;

   var beginX = x * (width / 3) + offsetX;
   var beginY = y * (height / 3) + offsetY;

   var endX = (x + 1) * (width / 3) - offsetX * 2;
   var endY = (y + 1) * (height / 3) - offsetY * 2;

   context.moveTo(beginX, beginY);
   context.lineTo(endX, endY); 

   context.moveTo(beginX, endY);
   context.lineTo(endX, beginY); 	

   context.stroke();
   context.closePath(); 
}

function paintO(x, y) {
	
   context.beginPath();

   context.strokeStyle = '#0000ff'; 
   context.lineWidth   = 4;

   var offsetX = (width / 3) * 0.1;
   var offsetY = (height / 3) * 0.1;

   var beginX = x * (width / 3) + offsetX;
   var beginY = y * (height / 3) + offsetY;

   var endX = (x + 1) * (width / 3) - offsetX * 2;
   var endY = (y + 1) * (height / 3) - offsetY * 2;

   context.arc(beginX + ((endX - beginX) / 2), beginY + ((endY - beginY) / 2), (endX - beginX) / 2 , 0, Math.PI * 2, true);

   context.stroke();
   context.closePath();
}

function isEmpty(xBoard, oBoard, bit) {
   return (((xBoard & bit) == 0) && ((oBoard & bit) == 0));
}



function markBit(markBit, player) {
   
   var bit = 1;
   var posX = 0, posY = 0;
   
   while ((markBit & bit) == 0) {
	bit = bit << 1;
        posX++;
	if (posX > 2) {
            posX = 0;
            posY++;
        }
   }
   
    if (player == 'O') { 
        oBoard = oBoard | bit;
	paintO(posX, posY);
    } else {
        xBoard = xBoard | bit;
	paintX(posX, posY);
    }
}


</script>
</body>
</html>